import React, { useState, useEffect } from 'react'
import { useDispatch } from "react-redux"
import { useNavigate } from "react-router-dom"
import "./myscss/Ceck2.scss"
import { NavBar, Sidebar, Search } from 'react-vant';
import { changeTxt3 } from "../../store/modules/HcySlice1"
import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:3000';

export default function Ceck2() {
    const navigate = useNavigate()
    let dispatch = useDispatch()
    let [dlist, setDlist] = useState([])
    const [stxt1, setStxt1] = useState('');
    const [stxt3, setStxt3] = useState('');
    const [active, setActive] = useState(0);
    let [flag1, setFlag1] = useState(false)
    let [flag2, setFlag2] = useState(false)

    let getdlist = async () => {
        let { data: { data } } = await axios.get("/getdoctors")
        if (stxt1 !== "") {
            data = data.filter(item => item.dname.includes(stxt1))
        }
        if (stxt3 !== "") {
            data = data.filter(item => item.dtype === stxt3)
        }
        setDlist(data)
    }

    let uptxt3 = async (item) => {
        if (item === "全部") {
            setStxt3("")
        } else {
            setStxt3(item)
        }
        setFlag2(false)
    }
    let uptxt1 = async (item) => {
        setStxt1(item)
    }

    useEffect(() => {
        getdlist()
    }, [stxt3, stxt1])
    let addresslist = ["全部", "北京", "上海", "河南", "广东"]
    let typelist = ["全部", "综合", "妇产", "口腔", "儿童", "肿瘤", "中医", "骨科"]
    return (
        <div id='ceck2'>
            <div className='top1'>
                <NavBar
                    leftText="选择医院"
                    onClickLeft={() => navigate('/ysrz/page1')}
                />
            </div>
            <div className='top2'>
                <Search
                    shape="round"
                    value={stxt1}
                    onChange={(val) => { uptxt1(val) }}
                    placeholder="请输入搜索关键词"
                />
            </div>
            <div className='main1'>
                <div className='ttop'>
                    <p>全部医院</p>
                </div>
                <div className='mbox'>
                    <div className='mmbox'>
                        <div onClick={() => { setFlag1(!flag1) }}>{addresslist[active]}
                            {flag1 ? <span>
                                <svg t="1724759866629" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1720" width="20" height="20"><path d="M910.222222 796.444444c-17.066667 0-34.133333-5.688889-45.511111-17.066666L551.822222 409.6c-11.377778-5.688889-17.066667-11.377778-34.133333-11.377778-5.688889 0-22.755556 5.688889-28.444445 11.377778l-329.955555 364.088889c-22.755556 22.755556-56.888889 22.755556-79.644445 5.688889-22.755556-22.755556-22.755556-56.888889-5.688888-79.644445l329.955555-364.088889c28.444444-34.133333 73.955556-51.2 119.466667-51.2s85.333333 22.755556 119.466666 56.888889l312.888889 364.088889c22.755556 22.755556 17.066667 56.888889-5.688889 79.644445-11.377778 5.688889-28.444444 11.377778-39.822222 11.377777z" fill="#2c2c2c" p-id="1721"></path></svg>
                            </span> :
                                <span>
                                    <svg t="1724759946508" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1978" width="20" height="20"><path d="M517.688889 796.444444c-45.511111 0-85.333333-17.066667-119.466667-51.2L73.955556 381.155556c-22.755556-22.755556-17.066667-56.888889 5.688888-79.644445 22.755556-22.755556 56.888889-17.066667 79.644445 5.688889l329.955555 364.088889c5.688889 5.688889 17.066667 11.377778 28.444445 11.377778s22.755556-5.688889 34.133333-17.066667l312.888889-364.088889c22.755556-22.755556 56.888889-28.444444 79.644445-5.688889 22.755556 22.755556 28.444444 56.888889 5.688888 79.644445L637.155556 739.555556c-28.444444 39.822222-68.266667 56.888889-119.466667 56.888888 5.688889 0 0 0 0 0z" fill="#2c2c2c" p-id="1979"></path></svg>
                                </span>
                            }
                        </div>
                        <div className='nbox' onClick={() => { setFlag2(!flag2) }}>{stxt3.length > 0 ? stxt3 : "医院类型"}
                            {flag2 ? <span>
                                <svg t="1724759866629" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1720" width="20" height="20"><path d="M910.222222 796.444444c-17.066667 0-34.133333-5.688889-45.511111-17.066666L551.822222 409.6c-11.377778-5.688889-17.066667-11.377778-34.133333-11.377778-5.688889 0-22.755556 5.688889-28.444445 11.377778l-329.955555 364.088889c-22.755556 22.755556-56.888889 22.755556-79.644445 5.688889-22.755556-22.755556-22.755556-56.888889-5.688888-79.644445l329.955555-364.088889c28.444444-34.133333 73.955556-51.2 119.466667-51.2s85.333333 22.755556 119.466666 56.888889l312.888889 364.088889c22.755556 22.755556 17.066667 56.888889-5.688889 79.644445-11.377778 5.688889-28.444444 11.377778-39.822222 11.377777z" fill="#2c2c2c" p-id="1721"></path></svg>
                            </span> :
                                <span>
                                    <svg t="1724759946508" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1978" width="20" height="20"><path d="M517.688889 796.444444c-45.511111 0-85.333333-17.066667-119.466667-51.2L73.955556 381.155556c-22.755556-22.755556-17.066667-56.888889 5.688888-79.644445 22.755556-22.755556 56.888889-17.066667 79.644445 5.688889l329.955555 364.088889c5.688889 5.688889 17.066667 11.377778 28.444445 11.377778s22.755556-5.688889 34.133333-17.066667l312.888889-364.088889c22.755556-22.755556 56.888889-28.444444 79.644445-5.688889 22.755556 22.755556 28.444444 56.888889 5.688888 79.644445L637.155556 739.555556c-28.444444 39.822222-68.266667 56.888889-119.466667 56.888888 5.688889 0 0 0 0 0z" fill="#2c2c2c" p-id="1979"></path></svg>
                                </span>
                            }
                        </div>
                    </div>
                    {flag1 && <Sidebar
                        value={active}
                        onChange={(v) => {
                            setActive(v);
                        }}
                    >
                        {addresslist.map((item, index) => (
                            <Sidebar.Item contentStyle={{ backgroundColor: '#fff', padding: '18px 10px' }} title={item} key={index}>
                                <div className='bixminbox'>
                                    {addresslist[active] === "全部" && dlist.map(item => (
                                        <div key={item._id} className='minbox' onClick={() => { navigate("/ysrz/page1"); dispatch(changeTxt3(item.dname)) }}>{item.dname}</div>
                                    ))}
                                    {(dlist.filter(ditem => addresslist[active] === ditem.daddress)).map(item => (
                                        <div key={item._id} className='minbox' onClick={() => { navigate("/ysrz/page1"); dispatch(changeTxt3(item.dname)) }}>{item.dname}</div>
                                    ))}
                                </div>
                            </Sidebar.Item>
                        ))}
                    </Sidebar>}
                </div>
                {flag2 && <div className='main2'>
                    {typelist.map((item, index) => (
                        <div className='newshow' key={index} onClick={() => { uptxt3(item) }}>
                            <h2>{item}</h2>
                        </div>
                    ))}
                </div>}



                {!flag1 && !flag2 && <div className='main2'>
                    {dlist.map(item => (
                        <div key={item._id} className='show2'
                            onClick={() => { navigate("/ysrz/page1"); dispatch(changeTxt3(item.dname)) }}
                        >
                            <p className='txt1'>{item.dname}</p>
                            <p className='txt2'>
                                <span>{item.ddengji}</span>
                                <span>{item.dtype}</span>
                            </p>
                        </div>
                    ))}
                </div>}

            </div>
        </div>
    )
}
